<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
	* {margin: 0; padding: 0;}
	#div1 {width: 712px; height: 108px; margin: 100px auto; position: relative; background: red; overflow: hidden;}
	#div1 ul {position: absolute; left: 0; top: 0}
	#div1 ul li {float: left; width: 178px; height: 108px;list-style: none;}
</style>
<script>
		window.onload = function()
		{
			var speed = 2;
			var oDiv = document.getElementById('div1');
			var oUl = oDiv.getElementsByTagName('ul')[0];
			//var oUl = document.getElementsByTagName('ul')[0];
		//var oUl = document.getElementById('ul1');
			var aLi = oUl.getElementsByTagName('li');
			var oa = document.getElementsByTagName('a');
			
			oa[0].onclick =function()
			{
					speed =-2;
			};
			
				oa[1].onclick =function()
			{
					speed =2;
			};



			oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
			oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
				
			//控制滚动快慢，  要么 定时 时间， 要么 滚动偏移量。 可以调试
			var timer = setInterval(Move,30);
				
			oDiv.onmouseover =function()
			{
							clearInterval(timer);
			};
			
			oDiv.onmouseout = function()
			{
							 timer = setInterval(Move,30);
			};
			
			function Move()
			{
					//向左滚， offsetLeft 是负数
					if(oUl.offsetLeft <= - oUl.offsetWidth/2)
						{
								oUl.style.left = '0';
						}
						//向右滚
					if(oUl.offsetLeft > 0)
						{
								oUl.style.left = -oUl.offsetWidth/2 + 'px';
						}
					oUl.style.left = oUl.offsetLeft + speed + 'px';
			}
		};
</script>
</head>

<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
			<ul id="ul1">
				<li> <img src="img2/1.jpg" alt=""></li>
				<li> <img src="img2/2.jpg" alt=""></li>
				<li> <img src="img2/3.jpg" alt=""></li>
				<li> <img src="img2/4.jpg" alt=""></li>
			</ul>
</div>
</body>
</html>
